<ion-header class="home-header" >
  <ion-navbar text-center style="background-color: white;padding: 0">
    <img src="../../assets/imgs/navbar_logo@2x.png" alt="" style="width: 30%">
  </ion-navbar>
</ion-header>

<ion-content style="background-color: #F0F0F0;padding: 0">
  <div style="align-content: center;white-space:nowrap;background-color: white">
      <div *ngFor="let room of room_list index as i" class="device-tab-div" >
        <button ion-button  clear  (click)="choose_room(i)" class="device-tab-button" [class.button-choosed]="choosed_num == i">{{room}}</button>
      </div>
  </div>
  <div *ngIf="rooms.length > 6" class="more-room-btn" (click)="all_room()">
    <img src="../assets/imgs/toptabbar_icon_more_default@2x.png" alt="" style="width: 100%;">
  </div>

  <ion-grid>
    <ion-row >
      <ion-col col-4  *ngFor="let device of device_list index as j" class="device-col">
        <ion-card class="device-card" (click)="take_on_off(j)">
          <ion-card-content class="device-card-content" >
            <span class="switch-dot" [class.on]="device.state !=0"  [class.off]="device.state == 0">•</span>
            <!--<img src="../assets/imgs/device_icon_tv_default@2x.png" class="device-img" >-->
            <img *ngIf="device.icon != 'device_default'" src="../assets/imgs/{{device.icon}}@2x.png" class="device-img" >
            <img *ngIf="device.icon == 'device_default'" src="../assets/imgs/device_icon_tv_default@2x.png" class="device-img" >
          </ion-card-content>
        </ion-card>
        <p class="device-name">{{device.name}}</p>
      </ion-col>
    </ion-row>
  </ion-grid>


</ion-content>
